<template>
  <div class="roleAdd">
    <el-form :model="formItem" ref="formItem" :rules="rules" label-width="80px">
        <el-form-item label="权限名称" prop="purviewName">
            <el-input ref="purviewName" v-model="formItem.purviewName" autofocus=""></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="purviewType">
            <Select v-model="formItem.purviewType">
              <Option v-for="item in formItem.granttypelist" :value="item.dicVal" :key="item.dicBh">{{ item.dicName }}</Option>
            </Select>
            <!-- <el-input ref="purviewType" v-model="formItem.purviewType"></el-input> -->
        </el-form-item>
        <el-form-item label="权限值" prop="purviewVal">
            <el-input ref="purviewVal" v-model="formItem.purviewVal"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="serialNumber">
            <el-input ref="serialNumber" v-model="formItem.serialNumber"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnable">
            <el-switch ref="isEnable" v-model="formItem.isEnable"></el-switch>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="save" @click="save('formItem',id.idParentBh)">保存</el-button>
            <el-button class="quxiao" @click="closeLayer">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "roleAdd",
  props: ["id"],
  data() {
    return {
      selectlist: {
        dicMark: "QXGL_QXLX",
        pageSize: 10000,
      },
      formItem: {
        purviewName: "", //权限名称
        purviewType: "", //权限类型
        purviewVal: "", //权限值
        serialNumber: "",//序号
        isEnable: true
      },
      rules: {
        purviewName: [
          { required: true, message: "请填写权限名称", trigger: "blur" },
          { max: 30, message: "最大长度30", trigger: "blur" }
        ],
        purviewVal: [
          { required: true, message: "请填写权限值", trigger: "blur" },
          { max: 30, message: "最大长度30", trigger: "blur" }
        ],
        serialNumber: [
          { required: true, message: "请填写序号", trigger: "blur" },
        ],
        purviewType: [{ required: true, message: "请选择权限类型", trigger: "change" }]
      }
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      //获取权限类型
      this.getRoleType();
    });
  },
  methods: {
    //关闭layer弹窗
    closeLayer() {
      layer.closeAll();
    },
    //获取权限类型
    getRoleType() {
      this.$nextTick(() => {
        axios
          .get(dictionariesURL, {
            headers: {'Authorization': appDB.get("userInfo").token},
            params: this.selectlist
          })
          .then(response => {
            let d = response.data;
            if (d.resultCode == 0) {
              this.formItem.granttypelist = d.record.rows;
            } else {
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      });
    },
    //新增
    save(formName, id) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 验证通过，在这里写要执行的方法
          axios
            .post(
              grantURL,
              {
                purviewName: this.formItem.purviewName,
                purviewVal: this.formItem.purviewVal,
                purviewParentBh: id,
                isEnable: this.formItem.isEnable,
                serialNumber: this.formItem.serialNumber,
                purviewType: this.formItem.purviewType
              },
              {
                headers: {'Authorization': appDB.get("userInfo").token},
              }
            )
            .then(response => {
              let d = response.data;
              if (d.resultCode == 0) {
                this.closeLayer(); //关闭弹窗
                this.$parent.getGrentList(); //所有权限
                this.$parent.getLeftGrent(); //左侧权限树
              } else {
                layer.msg(d.msg);
              }
            })
            .catch(error => {
              layer.msg("网络错误");
            });
        } else {
          // 验证未通过，在这里写要执行的方法
          // console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.roleAdd {
  width: 80%;
  padding: 50px 10%;
  float: left;
}
.save {
  padding: 8px 40px;
  background: #38b824;
  border-color: #38b824;
  border-radius: 30px;
  float: right;
  margin-left: 30px;
}
.quxiao {
  border: 0;
  background: #cecece;
  padding: 8px 40px;
  border-color: #367fb6;
  border-radius: 30px;
  float: right;
}
</style>


